import { createPortal } from 'react-dom';
import { useEffect, useState } from 'react';

const Portal = ({ children, containerId = 'portal-root' }) => {
  const [container, setContainer] = useState(null);

  useEffect(() => {
    // 查找或创建portal容器
    let portalContainer = document.getElementById(containerId);
    
    if (!portalContainer) {
      // 如果不存在，创建一个
      portalContainer = document.createElement('div');
      portalContainer.id = containerId;
      portalContainer.style.position = 'relative';
      portalContainer.style.zIndex = '10000';
      
      // 继承根元素的主题属性，确保CSS变量可用
      const rootElement = document.querySelector('[data-theme]');
      if (rootElement) {
        portalContainer.setAttribute('data-theme', rootElement.getAttribute('data-theme'));
      }
      
      document.body.appendChild(portalContainer);
    } else {
      // 如果容器已存在，也要确保主题属性是最新的
      const rootElement = document.querySelector('[data-theme]');
      if (rootElement) {
        portalContainer.setAttribute('data-theme', rootElement.getAttribute('data-theme'));
      }
    }
    
    setContainer(portalContainer);

    // 监听主题变化，动态更新Portal容器的主题属性
    const updateTheme = () => {
      const rootElement = document.querySelector('[data-theme]');
      if (rootElement && portalContainer) {
        portalContainer.setAttribute('data-theme', rootElement.getAttribute('data-theme'));
      }
    };

    // 使用MutationObserver监听根元素属性变化
    const observer = new MutationObserver((mutations) => {
      mutations.forEach((mutation) => {
        if (mutation.type === 'attributes' && mutation.attributeName === 'data-theme') {
          updateTheme();
        }
      });
    });

    const rootElement = document.querySelector('[data-theme]');
    if (rootElement) {
      observer.observe(rootElement, { attributes: true, attributeFilter: ['data-theme'] });
    }

    // 清理函数
    return () => {
      observer.disconnect();
      // 注意：这里不删除容器，因为可能有其他组件在使用
      // 容器会在页面卸载时自动清理
    };
  }, [containerId]);

  // 如果容器还没准备好，不渲染任何内容
  if (!container) {
    return null;
  }

  return createPortal(children, container);
};

export default Portal;
